import React from "react";

import { Link, Outlet, useNavigate } from "react-router-dom";

// 解决选中message导航刷新时报错的问题
// A good rule of thumb is that elements inside the map() call need keys.
function MessageItem(props){
  const {id, title, content} = props

  return (
  <li style={{listStyle:'none'}}>
    <Link replace={false} to={{pathname:"detail"}} state={{id, title, content}}>{title}</Link>
  </li>
  )
}

export default function Message() {
  const messages = [
    { id: 1, title: "消息1", content: "内容1" },
    { id: 2, title: "消息2", content: "内容2" },
    { id: 3, title: "消息3", content: "内容3" },
  ];

  return (
    <div>
      <nav>
        <ul>
          {messages.map((m) => {
            // 向组件传递params参数
            return (
            <li key={m.id} style={{listStyle:'none'}}>
              <Link to={`${m.id}/${m.title}/${m.content}`}>{m.title}</Link>
            </li>)
            // 向组件传递search参数
            // return <Link key={m.id} to={`?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link>
            // 向组件传递state参数
            // v5演示完整路径示例 return <Link key={m.id} to={{pathname:'/home/message/detail', state:{id:m.id, title:m.title, content:m.content}}}>{m.title}</Link>
            /*
            return (
              <MessageItem key={m.id} {...m} />
            )*/
            })}
        </ul>
      </nav>
      <Outlet />
    </div>
  );
}
